<template>
  <div class="content">
    <header>
      <p class="title">
         配置权限集
      </p>
    </header>
   <section v-if="show.cun">
      <div class="head">
          <div class="left">
            <input v-model="keywords" @keyup.enter="search()" placeholder="请输入搜索内容..." type="text">
            <div class="sousuo" @click="search()">
              <img src="../assets/img/sou.png" alt="">
              搜索
            </div>
          </div>
          <div class="add" @click="configpermiss">
            <img src="../assets/img/bshezhi.png" alt="">
            配置权限集
          </div>
        </div>
         <el-table
             :data="tableData"
             height="750"
             border
             stripe
             style="width: 100%;margin-top:20px;">

             <el-table-column
                   type="selection"
                   fixed
                   width="55">
                 </el-table-column>
               <el-table-column
                     type="index"
                     fixed
                     width="50">
                </el-table-column>
            <el-table-column
              label="授权人员"
              width="180">
           <template slot-scope="scope">
                    <p  v-for='item in  scope.row.real_name'>
                      {{item.real_name}}
                    </p>
               </template>>
            </el-table-column>
            <el-table-column
               prop="name"
               label="权限集名程"
               width="180">
             </el-table-column>
             <el-table-column
               prop="client_unit"
               label="区域集合"
               width="180">
               <template slot-scope="scope">
                    <p  v-for='item in  scope.row.region.data'>
                      {{item.region_name}}
                    </p>
               </template>
             </el-table-column>
             <el-table-column
               prop="limit_lock"
               label="锁名称"
               width="180">
              <template slot-scope="scope">
                  <p  v-for='item in  scope.row.lock_name.data'>
                    {{item.lockalias}}
                  </p>
               </template>
             </el-table-column>
             <el-table-column
               prop="limit_lock"
               label="安装位置"
               width="180">
              <template slot-scope="scope">
                    <p  v-for='item in  scope.row.lock_install'>
                      {{item}}
                    </p>
               </template>
             </el-table-column>
             <el-table-column
             width="180"
             label="操作">
                   <template slot-scope="scope">
                     <el-button
                       size="mini" @click='limitedit(scope.row)'>编辑</el-button>
                     <el-button
                       @click='delete_lockpowers(scope.row)'
                       size="mini"
                       type="danger">删除</el-button>
                   </template>
                 </el-table-column>
           </el-table>
   </section>
 <config v-if="show.children" :isshow='show'></config>



<!-- 编辑 -->

 <el-dialog
      title="编辑"
      :visible.sync="dialogVisible"
      width="30%"
     >
     <el-form  v-model="editform" label-width="100px" class="demo-ruleForm">
       <el-form-item label="权限集名称" prop="real_name">
        <el-input v-model="editform.name"></el-input>
       </el-form-item>
       <el-form-item label="授权人员名称">
     <el-checkbox-group v-model="check.userid" >
         <el-checkbox       v-for='item in editform.user'
                             :label="item.real_name"
                             :key="item.id"
                             :value="item.id"
                             >
               </el-checkbox>
          </el-checkbox-group>
       </el-form-item>
       <el-form-item label="区域集合">
       <el-checkbox-group v-model="check.regionid" >
          <el-checkbox       v-for='item in editform.region'
                               :label="item.region_name"
                               :key="item.id"
                               :value="item.id"
                               >
                 </el-checkbox>
            </el-checkbox-group>
         </el-form-item>
         <el-form-item label="锁名称">
         <el-checkbox-group v-model="check.lockid" >
            <el-checkbox       v-for='item in editform.lock'
                                 :label="item.lockname"
                                 :key="item.id"
                                 :value="item.id"
                                 >
                   </el-checkbox>
              </el-checkbox-group>
           </el-form-item>
     </el-form>
     <div class="btn">
       <span @click="submit">提交</span>
       <span>取消</span>
     </div>

    </el-dialog>



  </div>
</template>

<script>
  import {lockpowers_list,auth_user_list,seregion_list,lock_list,edit_limt,delete_lockpowers} from "../js/getApi.js"
  import config from '@/components/configpermissions'
  export default{
     components:{
       config
     },
     data(){
       return{
          editform:{
            name:'',
            id:'',
            user:[],
            region:[],
            lock:[]
          },
          check:{
            userid:[],
            regionid:[],
            lockid:[]
          },
          keywords:'',
          show:{
            cun:true,
            children:false
          },
          tableData:[],
          dialogVisible:false
         }
       },
       methods:{
        async search(){
         const data=await lockpowers_list(this.$store.state.token,this.keywords,1,100);
         this.tableData=data;
         },
       async  delete_lockpowers(row){
              const data=await delete_lockpowers(this.$store.state.token,row.id);
               alert(data.msg);
              if(data.code==1){
                this.getlist();
              }
         },
        async submit(){
             let userid=''; let regionid=''; let lockid='';
             this.check.userid.forEach(item=>{
               this.editform.user.forEach(i=>{
                   if(i.real_name==item){
                     userid+=i.id+',';
                   }
               })
             })
             this.check.regionid.forEach(item=>{
               this.editform.region.forEach(i=>{
                   if(i.region_name==item){
                     regionid+=i.id+',';
                   }
               })
             })
             this.check.lockid.forEach(item=>{
               this.editform.lock.forEach(i=>{
                   if(i.lockname==item){
                     lockid+=i.lock_id+',';
                   }

               })
             })


             const data=await edit_limt(this.$store.state.token,this.editform.id,this.editform.name,lockid,regionid,userid);
             alert(data.msg);
             if(data.code==1){
               this.getlist();
               this.dialogVisible=false;
             }
         },
        async limitedit(row){

           const user=await auth_user_list(this.$store.state.token);
           const region=await seregion_list(this.$store.state.token,'',1,100);
           const lock=await lock_list(this.$store.state.token,'',1,100);
           
           this.editform={name:row.name,user:user,region:region,lock:lock.list,id:row.id}
            const cheakuser=row.real_name.map(item=>{
                 return item.real_name
               });

            const checkregion=row.region.data.map(item=>{
              return item.region_name
            })
            const checklock=row.lock_name.data.map(item=>{
              return item.lockalias
            })
            this.check.userid=cheakuser;
            this.check.regionid=checkregion;
            this.check.lockid=checklock;
            this.dialogVisible=true;
         },
         configpermiss(){
           this.show.cun=false;
           this.show.children=true;
         },
        async getlist(){
           const data=await lockpowers_list(this.$store.state.token,'',1,100);
           this.tableData=data;
         }
       },
      async created() {
         this.getlist();
       }
  }
</script>

<style scoped>
  header{
    display: flex;
    justify-content:space-between;
    align-items: center;
    height: 84px;
    color: rgba(5, 5, 5, 100);
    font-size: 16px;
    font-family: SourceHanSansSC-regular;
    border-bottom: 1px solid #F7F7F7;
  }
  section{
    margin-top: 30px;
  }
 .head{
    margin-top:33px;
   display: flex;
  }
  .head div{
    display: inline-block;
  }

  .head input{
    width: 190px;
    height:30px;
    border-radius:10px 0 0 10px;
    padding-left:10px;
    border: 1px solid rgba(187, 187, 187, 100);
    float: left;
  }
  .sousuo{
    width: 88px;
    height:34px;
    line-height: 34px;
    background-color: rgba(26, 188, 156, 100);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 100);
    float: left;
    margin-left: -1px;
    margin-top: -1px;
    color: #fff;
    cursor: pointer;
  }
  .sousuo img{
    width: 19px;
    height: 19px;
    vertical-align:middle;
  }
.add{
    width: 120px;
    height:34px;
    line-height: 34px;
    background-color: rgba(26, 188, 156, 100);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 100);
    color: #fff;
    font-size: 13px;
    margin-left: 50px;
    cursor: pointer;
  }
.add img{
  width: 20px;
  height:20px;
  vertical-align: middle;
}
.btn{
    margin-left: 100px;
    margin-top: 100px;
    }
    .btn span{
      display:inline-block;
      cursor: pointer;
    }
 .btn span:nth-of-type(1){
      width: 100px;
      height: 34px;
      line-height:34px;
      border-radius: 2px;
      background-color: rgba(26, 188, 156, 100);
      color: rgba(255, 255, 255, 100);
      font-size: 14px;
      text-align: center;
      font-family: Roboto;
  }
  .btn span:nth-of-type(2){
      width: 100px;
      height: 34px;
      line-height:34px;
      border-radius: 2px;
      background-color: rgba(255, 255, 255, 100);
      color: rgba(26, 188, 156, 100);
      font-size: 14px;
      text-align: center;
      font-family: Roboto;
      border: 1px solid rgba(26, 188, 156, 100);
      margin-left: 20px;
     }


</style>
